<template>
  <div class="">
    <div class="body-update body">
      <h4 style="text-align:center;">要先输入密保问题的答案才能注销哦</h4>
      <el-form :model="form" status-icon :rules="rules" ref="registerForm"  class="login-form">
        <el-form-item>
          <el-input placeholder="请输入问题验证是否是本人操作哦" v-model="form.question" clearable disabled></el-input>
        </el-form-item>
        <el-form-item  prop="answer">
          <el-input placeholder="请输入答案验证是否是本人操作哦" v-model="form.answer" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('registerForm')">注销</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      form: {
        question: '',
        answer: '',
      },
      rules:{
        answer:[
          { required: true, message: '答案不能为空哦', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符，太长记不住哦', trigger: 'blur' }
        ],
        secret:{}
      }
    }
  },
  mounted(){
    this.getQusition();
  },
  methods:{
    // 查询密保问题的数据
    async getQusition(){
      let variate = this.$store.getters.getUser.user_id;
      console.log(variate);
      const {data:res} = await this.$http.post("selSecret",{variate});
      console.log(res);
      if(res.status != 200){
        this.$message.error('获取数据失败');
      }else{
        let arr = res.message
        if(arr.length==0){
          this.$message('您还没有设置密保问题，不能注销账号哦');
        }else{
          this.form.question = res.message[0].question;
          this.secret = res.message[0];
        }

      }
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            this.updatesecret();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    async updatesecret(){
      let newAnswer = this.form.answer;
      let oldAnswer = this.secret.answer
      if(newAnswer==oldAnswer){
        // alert("注销成功，江湖再见");
        // 第二步：将这些打包添加到
        //  console.log(this.$store.getters.getShow);
        const {data:res} = await this.$http.get("delPraise");
        let variate = this.$store.getters.getUser.user_id;
        const {data:delUserRes} = await this.$http.post("delUser",{variate});
        console.log(delUserRes);
        this.$store.commit("updateShow",false);
        this.$store.commit("updateVerify",true);
        localStorage.removeItem("user");
        this.$message('注销成功，江湖再见');
        this.$router.push("/home");
        location.reload();
      }else{
        this.$message({
          message: '答案不正确哦，再想想',
          type: 'warning'
        });
         this.form.answer = "";
      }
      // const {data:res} = await this.$http.post("changeSecret",{answer});
    },
    // 重置密码
    resetForm() {
      this.form.answer = "";
    }
  }
}
</script>
<style scoped>
.login-form {
  width: 300px;
}
@import url('./css/person.css');
</style>
